Язык CSS
Свойства margin, padding, border.


Сегодня мы будем учиться задавать свойства блоков. И делать это мы будем на примерах элементов div и span.
div - этот элемент является контейнером для остальных. Элемент div отделяется от остальных элементов абзацными отступами.
Элемент span, в отличии от div, создает строчный блок.


Практическое задание:
создайте html-страницу в которой есть четыре параграфа div c идентификаторами "first", "second", "third", "fourth", причем
параграфы "third" и "fourth" находятся внутри "second".
Отступы задать 10px, поля – 50px,
цвет границы div "second" отличается от других.
На примере этой страницы мы и будем рассматривать свойства блоков.


Border (граница)

Границы в CSS можно задавать отдельно для каждой стороны:

  • border-top - верхняя граница;

  • border-right - правая граница;

  • border-bottom - нижняя граница;

  • border-left - левая граница.

Каждый сегмент границы может иметь свои характеристики: цвет, толщину и тип линии.
Для этого к свойству границы через дефис необходимо дописать ключевые слова:

  • color - для цвета;

  • width - для толщины;

  • style - для типа линии.

Например, border-top-color определяет цвет верхней границы, а border-left-style - тип линии для левой границы.
Если все четыре границы будут иметь одинаковые значения, то следует воспользоваться сокращенной записью:

  • border-color - цвет всех границ;

  • border-width - толщина всех границ;

  • border-style - стиль всех границ.

Значениями свойства color могут быть именные цвета (red, blue и т.д.), шестнадцатеричные коды цветов (типа #FFCCFF) и десятичные коды в модели RGB (типа rgb(255, 0, 0)).
Значениями свойства width могут быть ключевые слова:

  • thin - тонкая граница;

  • medium - средняя граница;

  • thick - толстая граница.

А также любая единица измерения.


Значениями свойства style могут быть следующие ключевые слова:

  • none - граница отсутствует;

  • dotted - граница состоит из точек;

  • dashed - граница в виде пунктирной линии;

  • solid - граница отображается сплошной линией;

  • double - граница отображается двойной сплошной линией;

  • groove - граница отображается вдавленной объемной линией;

  • ridge - граница отображается выпуклой объемной линией;

  • inset - граница отображается так, что весь блок выглядит вдавленным;

  • outset - граница отображается так, что весь блок выглядит выпуклым.

В браузере разные стили границ выглядят так:
Разные стили границ


Попробуем на практике. Давайте зададим нашему первому div-у разные границы, чтобы посмотреть, как это работает:
div#first{
border-bottom-style:double;
border-bottom-color:red;
border-left-style:solid;
border-left-width:2px;
border-left-color:blue;
border-right-style:solid;
border-right-width:2px;
border-right-color:yellow;
border-top-style:dotted;
border-top-color:green}
Проверьте результат в браузере.


Результат в браузере:
Практика.Результат.


Иногда возможность задавать стили для разных секторов границы очень выручает, но чаще требуется задать единый стиль для всех границ и тогда удобнее пользоваться сокращенной записью border, в которой через пробел указываются: толщина, тип и цвет (именно в таком порядке).


Практическое задание: каждому элементу div нашей страницы зададим один стиль границ (каждому свой).


Margin (поля)

Как вы помните, поля задают свободное пространство вокруг элемента.
Как и границы, поля в CSS можно определять отдельно для верхней, правой, нижней и левой сторон.
Для этого используются свойства:

  • margin-top - ширина верхнего поля;

  • margin-right - ширина правого поля;

  • margin-bottom - ширина нижнего поля;

  • margin-left - ширина левого поля.

Чаще используется сокращенная запись margin, где через пробел указываются ширина верхнего, правого, нижнего и левого полей. Причем, именно в таком порядке.
Пример записи:

p{
margin:5px 10px 15px 10px}


Если значения верхнего и нижнего полей совпадают, и значения правого и левого полей совпадают, то сокращенная запись выглядит еще короче:

p{
margin:5px 10px}


В данном случае ширина верхнего и нижнего полей будет 5 пикселов, а правого и левого - по 10 пикселов.
Если же у всех полей ширина одинакова, то сокращенная запись выглядит так:

p{
margin:5px}


Значения полей можно задавать и в других единицах длины, и в процентах. Также величина значения может иметь отрицательное значение, что в некоторых случаях очень удобно использовать.


Практическое задание: каждому элементу div нашей страницы зададим одинаковую ширину полей -
верхнего и нижнего полей будет 20 пикселов, а
правого и левого - по 10 пикселов.


Padding (отступы)

Как вы помните, отступы позволяют отделить содержимое блока от границы.
Параметры отступов в CSS можно задать для каждой стороны отдельно, используя следующие свойства:

  • padding-top - ширина верхнего отступа;

  • padding-right - ширина правого отступа;

  • padding-bottom - ширина нижнего отступа;

  • padding-left - ширина левого отступа.

Значения свойств могут задаваться в различных единицах длины или в процентах.
Проценты вычисляются относительно ширины блока.
В качестве значения может выступать только положительная величина.
Как и с полями чаще удобнее использовать сокращенную запись, которая аналогична записи для полей.


Практическое задание:
каждому элементу div нашей страницы зададим одинаковые отступы - сверху и снизу - по 10 пикселов, а справа и слева - по 20 пикселов;
задайте также фон нашим элементам (свойство background), всем разный, чтобы убедиться, что фон отступов совпадает с фоном элемента, а фон полей - прозрачный;
теперь задайте ширину и высоту наших блоков (свойства width и height):
#first, #third и #fourth - width:300px; height:100px;
#second - width:300px.


Результат в браузере:
Практика.Результат.


Но мы задали ширину у всех блоков одинаковую, почему же тогда в IE блок с id="second" шире первого блока? Да потому, что IE не включает в размер блока поля и отступы. Браузер отобразил 3 и 4 блоки шириной в 300 пикселов, а потом задал им поля и отступы, именно на это количество пикселов наш второй блок и шире первого. А остальные браузеры делают наоборот.
Исправим это так, чтобы во всех браузерах было одинаково:

#first{ background:yellow; width:300px; height:100px; }
#second{ background:yellow; width:300px; }
#third, #fourth{ background:pink; width:270px; height:100px; } – ширина минус отступы


Вот теперь во всех браузерах все в порядке.
Вообще разное отображение свойства margin в разных браузерах держите в голове, так как при верстке сайта оно используется обязательно, а вот отображаться может по-разному.
Собственно мы рассмотрели все способы задания полей, отступов и границ.


Практическое задание: для повторения пройденного задайте
красную строку 15px,
цвет текстов и цвет первой буквы элементов div (для #first – один, для #third, #fourth -другой).


Сегодня мы затронули основы блочной верстки сайта.


Источники:


← Язык CSS. Блоки CSS. Язык CSS. Позиционирование блоков. →


comments powered by Disqus